<template>
  <div>
    <el-table border :data="skuList">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" style="width: 100px; heigth: 100px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row, $index }">
          <el-tooltip v-if="row.isSale === 0" content="上架" placement="top">
            <el-button type="success" icon="el-icon-top" size="mini" @click="skuUp(row)"></el-button>
          </el-tooltip>
          <el-tooltip v-else content="下架" placement="top">
            <el-button type="danger" icon="el-icon-bottom" size="mini" @click="skuButton(row)"></el-button>
          </el-tooltip>
          <el-tooltip content="更新" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini"></el-button>
          </el-tooltip>
          <el-tooltip content="查看详情" placement="top">
            <el-button type="info" icon="el-icon-info" size="mini" @click="getOneSkuInfo(row)"></el-button>
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的确定要删除此项sku吗?" @onConfirm="delSku(row, $index)">
            <el-tooltip slot="reference" content="删除" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" style="margin-left: 10px" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15]" :page-size="limit" layout=" prev, pager, next, jumper, ->, sizes, total" :total="total"> </el-pagination>
    <!-- 抽屉 -->
    <el-drawer title="查看SKU信息" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-row :gutter="10">
        <el-col :span="7"><div class="grid-content bg-purple">SKU名称</div></el-col>
        <el-col :span="17"
          ><div class="grid-content bg-purple">{{ skuInfo.skuName }}</div></el-col
        >
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7"><div class="grid-content bg-purple">SKU描述</div></el-col>
        <el-col :span="17"
          ><div class="grid-content bg-purple">{{ skuInfo.skuDesc }}</div></el-col
        >
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7"><div class="grid-content bg-purple">SKU价格</div></el-col>
        <el-col :span="17"
          ><div class="grid-content bg-purple">{{ skuInfo.price }}</div></el-col
        >
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7"><div class="grid-content bg-purple">平台属性</div></el-col>
        <el-col :span="17">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id" type="success" style="margin-right: 5px">{{ attrValue.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="7"><div class="grid-content bg-purple">图片列表</div></el-col>
        <el-col :span="12">
          <el-carousel height="230px" style="text-align: center">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <el-image style="width: 250px; height: 250px" :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { reqGetAllSkuList, reqSkuOnSale, reqSkuCancelSale, reqDeleteSku, reqGetOneSkuInfo } from '@/api/product/sku'
export default {
  name: 'SkuList',
  data() {
    return {
      skuList: [],
      page: 1,
      limit: 5,
      total: 1,
      drawer: false,
      direction: 'rtl',
      skuInfo: {}
    }
  },
  mounted() {
    this.getAllSkuList()
  },
  methods: {
    //获取sku列表
    async getAllSkuList() {
      let { page, limit } = this
      const result = await reqGetAllSkuList({ page, limit })
      if (result.code === 200) {
        // console.log(result)
        this.$message.success('获取Sku列表成功!')
        this.skuList = result.data.records
        this.total = result.data.total
      } else {
        this.$$message.error('获取sku数据失败!')
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.limit = val
      this.getAllSkuList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getAllSkuList()
    },
    //上架
    async skuUp(row) {
      const result = await reqSkuOnSale(row.id)
      if (result.code === 200) {
        this.$message.success('商品已上架!')
        this.$set(row, 'isSale', 1)
      } else {
        this.$$message.error('商品上架失败!')
      }
    },
    //下架
    async skuButton(row) {
      const result = await reqSkuCancelSale(row.id)
      if (result.code === 200) {
        this.$message.success('商品已下架!')
        this.$set(row, 'isSale', 0)
      } else {
        this.$message.error('商品下架失败!')
      }
    },
    //删除sku
    async delSku(row) {
      const result = await reqDeleteSku(row.id)
      if (result.code === 200) {
        this.$message.success('删除成功!')
        this.getAllSkuList()
      } else {
        this.$message.error('删除失败!')
      }
    },
    //查看sku
    async getOneSkuInfo(skuInfo) {
      const result = await reqGetOneSkuInfo(skuInfo.id)
      if (result.code === 200) {
        this.skuInfo = result.data
        this.drawer = true
      } else {
        this.$message.error('获取Sku对象数据失败...')
      }
    },
    //查看sku,el自带的方法
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    }
  }
}
</script>

<style lang="scss" scope>
.el-row {
  margin-bottom: 20px;
  // > :first-child {
  //   text-align: right;
  // }
}
.el-col {
  border-radius: 4px;
}
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>